Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@lion/button
Advanced tools
🛠 Status: Pilot Phase
Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.
The goal of our pilot phase is to gather feedback from a private group of users. Therefore, during this phase, we kindly ask you to:
- not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
- not publicly promote or link products derived from/based on Lion Web Components
As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1)
lion-button
provides a component that is easily stylable and is accessible in all contexts.
You can also set a button as disabled with the disabled
property.
npm i --save @lion/button
import '@lion/button/lion-button.js';
<lion-button>Button Text</lion-button>
There are multiple reasons why we used a Web Component as opposed to a CSS component.
We want to ensure that the event target returned to the user is lion-button
, not button
. Therefore, simply delegating the click to the native button immediately, is not desired. Instead, we catch the click event in the lion-button
, and ensure delegation inside of there.
By delegating the click()
to the native button, it will bubble back up to lion-button
which would cause duplicate actions. We have to simulate the full .click()
however, otherwise form submission is not triggered. So this bubbling cannot be prevented.
Therefore, on click, we flash a <button>
to the form as a direct child and fire the click on that button. We then immediately remove that button. This is a fully synchronous process; users or developers will not notice this, it should not cause problems.
Flashing the button in the way we do solves almost all issues except for one. One of the specs of W3C is that when you have a form with multiple inputs, pressing enter while inside one of the inputs only triggers a form submit if that form has a button of type submit.
To get this particular implicit form submission to work, having a native button in our lion-button
is a hard requirement. Therefore, not only do we flash a native button on the form to delegate lion-button
trigger to button
and thereby trigger form submission, we also add a native button
inside the lion-button
which type
property is synchronized with the type of the lion-button
.
To prevent form submission full page reloads, add a submit handler on the form like so:
<form @submit=${ev => ev.preventDefault()} >
Putting this on the @click
of the lion-button
is not enough.
FAQs
A button that is easily styleable and accessible in all contexts
The npm package @lion/button receives a total of 1,067 weekly downloads. As such, @lion/button popularity was classified as popular.
We found that @lion/button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.